<template>
    <div class="app-container">
        <div class="col-body" :style="{ height: HeightTable + 'px' }" v-loading="loading">
            <div class="mx-1" size="large">日志管理</div>
            <div class="blank"></div>
            <el-form ref="searchForm" inline :model="searchRules.form" :rules="searchRules.data">
                <el-form-item prop="blurry">
                    <el-input v-model="searchRules.form.blurry" placeholder="请输入关键词" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit('searchForm')">搜索</el-button>
                    <el-button @click="onReset('searchForm')">重置</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="tableData" stripe border style="width: 100%" :height="HeightTable - 170">
                <el-table-column property="id" label="ID" width="100" align="center" />
                <el-table-column property="username" label="用户名" width="200" align="center" />
                <el-table-column property="user_id" label="用户ID" width="200" align="center" />
                <el-table-column property="action" label="执行操作" show-overflow-tooltip align="center" />
                <el-table-column property="description" label="描述" align="center" />
                <el-table-column property="ip_address" label="IP地址" width="150" align="center" show-overflow-tooltip />
                <el-table-column property="created_at" label="操作时间" width="200" align="center" />
            </el-table>
            <el-pagination style="margin-top: 10px;text-align: center;" background :total="tableTotal"
                :default-page-size="pageSize" @current-change="onPageChange" />
        </div>
    </div>
</template>
<script>
import { logs } from "@/api/log";
export default {
    data() {
        return {
            loading: false,
            HeightTable: window.innerHeight - 90,
            pageSize: 10,
            tableTotal: 0,
            tableData: [],
            searchRules: {
                form: {
                    blurry: ''
                },
                data: {}
            },
        };
    },
    mounted() {
        this.getLogList();
    },
    methods: {
        onReset(refname) {
            this.$refs[refname].resetFields();
            this.getLogList(1);
        },
        onSubmit(refname) {
            this.$refs[refname].validate(valid => {
                if (valid) {
                    switch (refname) {
                        case "searchForm":
                            let form = this.searchRules.form,
                                search = ``;
                            for (const name in form) {
                                if (form[name] !== "") {
                                    search += `&${name}=${form[name]}`;
                                }
                            }
                            this.getLogList(1, search);
                            break;
                    }
                }
            });
        },
        onPageChange(page) {
            this.getLogList(page);
        },
        async getLogList(page, search) {
            page = page ? page : 1;
            search = search ? search : "";
            this.loading = true;
            logs(this.pageSize, page).then((res) => {
                this.tableData = res.data;
                this.tableTotal = + res.pagination.total_logs;
                this.loading = false
            }).catch((err) => {
                this.loading = false
            })
        }
    }
};
</script>

<style lang="scss" scoped>
.col-body .el-input {
    --el-input-width: 220px;
}

.col-body .el-select {
    --el-select-width: 220px;
}

.blank {
    height: 20px;
}

.blank.line {
    height: auto;
    padding-top: 10px;
    margin-bottom: 10px;
    border-bottom: 1px #EBEEF5 solid;
}

.col-body {
    position: relative;
    padding: 20px;
    background: #FFFFFF;
}

.tree-add {
    position: absolute;
    right: 20px;
}
</style>